<template>
  <!-- 系统管理 -->
  <div class="app-container">
    <div class="mainbox">
      <!-- 顶部操作 -->
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="公司名称:" prop="compName">
            <el-input
              v-model.trim="filterForm.compName"
              class="filter-item limit"
              style="width: 200px;margin-right:10px"
              maxlength="30"
              clearable
              placeholder="请输入公司名称"
              @keyup.enter.native="$_handleFilter"
            />
          </el-form-item>
          <el-form-item label="模板:" prop="projectId">
            <el-select v-model.trim="filterForm.projectId" placeholder="请选择" :clearable="true">
              <el-option
                v-for="item in temList"
                :key="item.id"
                :label="item.tempName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围:" prop="times">
            <el-date-picker
              v-model="filterForm.times"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="flex-1"></div>
        <el-button type="primary" @click="$_handleFilter">查询</el-button>
        <el-button @click="$_handleReset">重置</el-button>
      </div>
      <!-- 表格 -->
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <div class="flex-1" />
          <dt-dialog-column :columns="columns" @queryTable="getList" />
        </div>
        <el-table
          ref="table"
          v-loading="MX_listLoading"
          :data="MX_list"
          border
          highlight-current-row
          :row-key="$_getRowKey"
          style="width: 100%;text-align:center"
          :header-cell-style="MX_headerCellStyle"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            align="center"
            :index="$_tableIndex"
          />
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :min-width="item.minWidth"
            :formatter="item.formatter"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="评估数据"
            width="90px"
            align="center"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="getDetail(scope.row[idKeyName])">详情</el-link>
            </template>
          </el-table-column>
          <el-table-column
            :key="Math.random()"
            fixed="right"
            label="操作"
            width="150px"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                class="tBtn"
                @click="getDetail(scope.row[idKeyName], 'r')"
              >结果</el-button>
              <el-button
                size="mini"
                type="danger"
                class="tBtn"
                @click="handleDelete(scope.row[idKeyName])"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <dt-pagination
          v-show="MX_total > 0"
          :total="MX_total"
          :page.sync="MX_pageNav.pageNo"
          :limit.sync="MX_pageNav.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <dtDialog
      :title="dialogType === 'd' ? '评估详情' : '评估结果'"
      :footerSlot="true"
      class="get-page-form-import-dialog"
      :visible.sync="MX_fileUploadVisible"
      width="800px"
      @closeDialog="MX_fileUploadVisible = false"
    >
      <template slot="content">
        <el-table
          v-if="dialogType === 'd'"
          ref="table"
          :data="MX_applicationMsg.indexList"
          border
          highlight-current-row
          :row-key="$_getRowKey"
          style="width: 100%;text-align:center"
          :header-cell-style="MX_headerCellStyle"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column label="企业名称" minWidth="150px" align="center">
            <template slot-scope="scope">{{MX_applicationMsg.compName}}</template>
          </el-table-column>
          <el-table-column
            v-for="item in detailColumns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :min-width="item.minWidth"
            :formatter="item.formatter"
            align="center"
          />
        </el-table>
        <template v-else>
          <div style="text-align: right;">
            <el-button
              class="tBtn"
              icon="el-icon-folder-remove"
              type="primary"
              @click="handleExport()"
            >
              导出
            </el-button>
          </div>
          <el-table
            ref="table"
            :data="[MX_applicationMsg]"
            border
            highlight-current-row
            :row-key="$_getRowKey"
            style="width: 100%;text-align:center"
            :header-cell-style="MX_headerCellStyle"
          >
            <el-table-column
              type="index"
              label="序号"
              width="70"
              align="center"
              index="1"
            />
            <el-table-column label="企业名称" minWidth="150px" align="center">
              <template slot-scope="scope">{{scope.row.compName}}</template>
            </el-table-column>
            <el-table-column label="得分" align="center">
              <template slot-scope="scope"><span style="color: rgba(52,97,255,1);">{{scope.row.score}}</span></template>
            </el-table-column>
          </el-table>
        </template>
      </template>
    </dtDialog>
  </div>
</template>
<script>
import commonList from "@/utils/mixins/investment/commonList";
import intservApi from "@/api/investment/intserv";

export default {
  name: 'HistoryEva',
  mixins: [commonList],
  data() {
    return {
      filterForm: {
        compName: '',
        projectId: '',
        times: ''
      },
      // 列信息
      columns: [
        { prop: 'compName', label: `公司名称`, minWidth: '160px' },
        { prop: 'projectName', label: `模板名称`, minWidth: '160px' },
        { prop: 'createTime', label: `评估时间`, width: '180px' },
        { prop: 'createUser', label: `评估人`, width: '140px' }
      ],
      detailColumns: [
        { prop: 'indexName', label: '指标名称', minWidth: '150px', formatter: (row) => {
          return `${row.indexName}(${row.unit})`
          } },
        { prop: 'weight', label: '权重', width: '100px' },
        { prop: 'planValue', label: '计划值', width: '100px' },
        { prop: 'oprData', label: '实际值', width: '100px', formatter: (row) => {
            return <span style="color: rgba(52,97,255,1);">{row.oprData}</span>
          } }
      ],
      idKeyName: 'id',
      temList: [],
      dialogType: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  watch: {
    'filterForm.times'(val){
      this.$set(this.filterForm, 'createStartTime', !!val ? val[0] : '')
      this.$set(this.filterForm, 'createEndTime', !!val ? val[1] : '')
    }
  },
  created() {
    this.getList()
    this.getTemList()
  },
  activated() {
  },
  methods: {
    // 获取页面列表
    getList() {
      let filterForm = JSON.parse(JSON.stringify(this.filterForm))
      delete filterForm.times
      this.$_getList(intservApi.getHistoryEvaList,{
        ...filterForm,
        ...this.MX_pageNav
      })
    },
    // 获取模板列表
    getTemList() {
      intservApi.getProjectEvaTempList({ pageSize: -1 }).then(res => {
        this.temList = res.data.rows
      })
    },
    getDetail(id, type = 'd'){
      const loading = this.$loading({
        lock: true,
        text: `查询中...`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      intservApi.getHistoryEvaDetailList({ id }).then((res) => {
        this.dialogType = type
        this.MX_applicationMsg = res.data
        this.MX_fileUploadVisible = true
        loading.close()
      }).catch((r) => {
        loading.close()
      })
    },
    // 删除按钮
    handleDelete(id) {
      this.$_handleDelete(intservApi.delHistoryEvaItem, id, `${this.idKeyName}`)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.$_handleDownload(intservApi.exportHistoryEvaDetailResult, `${this.MX_applicationMsg.compName}评估结果`, {[this.idKeyName]: this.MX_applicationMsg[this.idKeyName]}, '导出');
    },
  }
}
</script>

<style lang="scss" scoped>
.tBtn{
  margin-top: 3px;
  margin-bottom: 3px;
}
.get-page-form-import-dialog{
  ::v-deep .el-dialog__footer{
    display: none;
  }
  ::v-deep .el-dialog__body{
    padding-top: 0;
  }
}
</style>
